<template>
  <el-card>
    <el-table :data="skuList" border>
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column label="sku名称" prop="skuName"></el-table-column>
      <el-table-column label="sku描述" prop="skuDesc"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="图片">
        <template v-slot="{ row }">
          <img
            :src="row.imageUrl"
            :alt="row.skuName"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" link>添加</el-button>
          <el-button type="primary" link>修改</el-button>
          <el-button type="primary" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      layout="prev, pager, next, jumper, ->, sizes, total"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Sku",
});

import { ref, watch } from "vue";

const skuList = ref([
  {
    id: 1,
    skuName: "华为~",
    skuDesc: "遥遥领先",
    price: 6900,
    weight: 0.32,
    imageUrl: "/8.jpg",
  },
  {
    id: 2,
    skuName: "华为111~",
    skuDesc: "遥遥领先",
    price: 6900,
    weight: 0.32,
    imageUrl: "/8.jpg",
  },
]);

const currentPage = ref(1);
const pageSize = ref(10);
const pageSizes = ref([10, 20, 30, 40]);
const total = ref(1000);

watch([currentPage, pageSize], () => {
  // 发送请求，获取数据
});
</script>

<style scoped lang="scss"></style>
